import React,{Component} from "react";
import addonspure from "react-addons-pure-render-mixin";
import axios from "axios";
import "./manager.css"


class Manager extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            managers: [{
                index: 0,
                title: "Bootstrap中文网",
                nickname: "Mary",
                imgs:["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg"],
                like_num: 200,
                comm_num: 10,
                send_num: 5,
                content: "虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。"
            },{
                index: 0,
                title: "Bootstrap中文网",
                nickname: "Mary",
                imgs:["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg"],
                like_num: 200,
                comm_num: 10,
                send_num: 5,
                content: "虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。"
            },{
                index: 0,
                title: "Bootstrap中文网",
                nickname: "Mary",
                imgs:["../imgs/1.jpg","../imgs/2.jpg","../imgs/3.jpg"],
                pubTime:"2020-01-01",
                like_num: 200,
                comm_num: 10,
                send_num: 5,
                content: "虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。"
            },
            ],
            like_img: require("../imgs/like.png"),
            like_img_on: require("../imgs/likeon.png"),
            comm_img: require("../imgs/comment.png"),
            send_img: require("../imgs/send.png"),
            list: [],
            like_num:0,
            isShow: false,
            like_state: []
        };
        this.click = this.click.bind(this);
        this.loadData = this.loadData.bind(this);

        this.shouldComponentUpdate = addonspure.shouldComponentUpdate.bind(this);
    }

    loadData(){
        axios.get("http://localhost:2000/blog",{}).then(res=> {


            console.log(res)
            this.setState({
                list:this.state.list.concat(res.data.res),
                // like_state:this.state.like_state.concat(like_num_list),
                like_num:res.data.res.likes
            });
        }).catch(function (err) {
            console.log(err);
        });
    }

    componentDidMount() {
        this.loadData();
        //滚动的时候自动加载
        let timeoutId;

        //拿到 下拉加载更多 标签对象
        const  wrapper = this.refs.wrapper;

        const thisSh = this;

        function callback(){
            //判断wrapper 是否已经滚动到暴露在页面的可视范围内了

            //获取h2的距离
            //获取当前对象到视窗上边框的距离
            const top = wrapper.getBoundingClientRect().top;

            //获取窗口高度 h1
            const winHight =  window.screen.height



            //this 是否存在？  当然不存在
            if(top < winHight){
                //加载数据  更新state  更新页面
                thisSh.loadMoreData(thisSh)
            }
        }

        //添加监听事件
        window.addEventListener("scroll",function () {
            //定时监听
            if(timeoutId){
                clearTimeout(timeoutId);
            }
            //定时 感觉有一个加载的过程
            timeoutId = setTimeout(callback,5000);

        }.bind(this),false);

    }

    loadMoreData(that){
        that.loadData()
    }



    click(e,q,index){

        var id = document.getElementById("like"+index);
        axios.get("http://localhost:4000/addLikes",{params:{
                likes:q+1,
                blogID:e
            }}).then(res=>{
            console.log(res);
        });

        id.src = this.state.like_img_on;
    }


    render() {
        return (
            <div>
                <div className="blogList">
                    {
                        this.state.managers.map((item,index)=>{
                            return (
                                <div key={index}>
                                    <div className="blog container">
                                        <div className="blog_body">
                                            <div className="d-flex justify-content-start">
                                                <img className="pic_r" src={require('../imgs/1.jpg')} alt="头像"/>
                                                <div className="d-flex flex-column bd-highlight mb-3">
                                                    <label className="nickname">{item.nickname}</label>
                                                    <label className="pub_time">{item.pubTime}</label>
                                                </div>
                                            </div>
                                            <div className="blog_content d-flex justify-content-around">
                                                {
                                                    item.imgs.map((it,ind)=>{
                                                        return (
                                                            <img key={ind} className="blog_img" src={require("../imgs/1.jpg")}/>
                                                        )
                                                    })
                                                }
                                            </div>
                                            <p className="card-text">{item.content}</p>
                                            <div className="ico d-flex justify-content-around">
                                                <div className="col-sm"   onClick={()=>this.click(item.blogID,item.likes,index)}><img id={"like"+index} className="like" src={process.env.PUBLIC_URL + this.state.like_img}/>{this.state.like_num}</div>
                                                <div className="col-sm"><img className="like" src={process.env.PUBLIC_URL + this.state.comm_img}/>{this.state.managers.comm_num}</div>
                                                <div className="col-sm"><img className="like" src={process.env.PUBLIC_URL + this.state.send_img}/>{this.state.managers.send_num}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            )
                        })
                    }

                    <div className="load-more" ref="wrapper">
                        <div className="drop-statu-box" >
                            下拉加载更多
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default Manager;